<script setup>
// 静态分类数据，根据截图样式调整
const categories = [
  { main: '何方瑶', subs: ['计科3', '25216950307'] },
  { main: '美食', subs: ['面点', '干果'] },
  { main: '餐厨', subs: ['数码产品'] },
  { main: '电器', subs: ['床品', '四件套', '被枕'] },
  { main: '居家', subs: ['奶粉', '玩具', '辅食'] },
  { main: '洗护', subs: ['洗发', '洗护', '美妆'] },
  { main: '孕婴', subs: ['奶粉', '玩具'] },
  { main: '服饰', subs: ['女装', '男装'] },
  { main: '杂货', subs: ['户外', '图书'] },
  { main: '品牌', subs: ['品牌制造'] }
]
</script>

<template>
  <div class="home-category">
    <ul class="menu">
      <li v-for="(item, index) in categories" :key="index">
        <a href="/" class="main-category">{{ item.main }}</a>
        <span v-for="(sub, subIndex) in item.subs" :key="subIndex" class="sub-category">{{ sub }}</span>
        <span class="arrow">></span>
      </li>
    </ul>
  </div>
</template>

<style scoped lang='scss'>
.home-category {
  width: 250px;
  height: 500px;
  background: rgba(0, 0, 0, 0.8);
  position: relative;
  z-index: 99;

  .menu {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      padding-left: 40px;
      height: 50px;
      line-height: 50px;
      position: relative;
      display: flex;
      align-items: center;
      color: #fff;

      &:hover {
        background: $xtxColor;
      }

      .main-category {
        font-size: 16px;
        font-weight: 500;
        color: #fff;
        margin-right: 8px;
        text-decoration: none;
      }

      .sub-category {
        font-size: 14px;
        opacity: 0.9;
        margin-right: 8px;
      }

      .arrow {
        position: absolute;
        right: 20px;
        font-size: 14px;
        opacity: 0.8;
      }
    }
  }
}
</style>